<template>
    <div>
        <div class="banner" @click="handleGallaryClick">
            <img :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-title">
                    {{sightName}}</div>
                <div class="banner-number">
                    <span class="iconfont icon-more">&#xe64a;</span>
                    <span>{{gallaryImgs.length}}</span>
                </div>
            </div>
        </div>
        <fade-animation>
          <detail-gallary :gallaryImgs="gallaryImgs" v-show="showGallary" @close="handleGallaryClose">
          </detail-gallary>
        </fade-animation>
    </div>
</template>
<script>
import DetailGallary from '@/common/gallary/Gallary'
import FadeAnimation from '@/common/fade/fadeAnimation'
export default {
  name: 'Banner',
  props: {
    bannerImg: {
      type: String
    },
    sightName: {
      type: String
    },
    gallaryImgs: {
      type: Array
    }
  },
  data () {
    return {
      showGallary: false
    }
  },
  methods: {
    handleGallaryClick () {
      this.showGallary = true
    },
    handleGallaryClose () {
      this.showGallary = false
    }
  },
  components: {
    DetailGallary,
    FadeAnimation
  }
}
</script>
<style lang="stylus" scoped>
.banner
    position relative
    width 100%
    height 0
    padding-bottom 55%
    overflow hidden
    img
        width 100%
    .banner-info
        color #fff
        width 100%
        height .6rem
        line-height .6rem
        position absolute
        bottom 0
        left 0
        right 0
        display flex
        background linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.8))
        .banner-title
            font-size .32rem
            flex 1
            padding 0 .2rem
        .banner-number
            font-size .3rem
            border-radius .2rem
            background rgba(0,0,0,.8)
            padding-right .4rem
</style>
